@use "sass:math"
@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"
@import "ozaria/site/styles/play/images"

#level-chat-view
  $bgWhite: #f6f6f8
  $bgOrange: #ff932e
  $bgOzaria: #40f3e4
  $fontPurple: #5b586b
  $fontWhite: #ffefe0

  box-sizing: border-box
  width: 22% // 40% of the canvas

  position: absolute
  left: 30px
  bottom: 5px
  height: 0
  font-size: 16px
  color: white
  z-index: 5

  code
    text-shadow: none
    background-color: #d1cfff
  
  .action
    color: #aff
  tr.me .action
    color: #ffa

  .message-body
    margin-top: 20px
    display: flex
    font-weight: 700
    align-items: end
    color: $fontPurple

    p
      margin: 0

      &:not(:last-child)
        margin-bottom: 15px

    .message-content
      min-height: 10px
      margin-left: 20px
      padding: 1rem 2rem
      border-radius: 15px
      border-bottom-left-radius: 0px
      position: relative
      background: $bgWhite

      &:before
        content: ""
        width: 20px
        height: 20px
        position: absolute
        left: -20px
        bottom: 0
        background: radial-gradient(circle at top left, transparent, transparent 20px, $bgWhite 20px, $bgWhite)

  .me
    .message-body
      flex-direction: row-reverse
      @if $is-codecombat
        color: $fontWhite
      @else
        color: $fontPurple

      .message-content
        @if $is-codecombat
          background: $bgOrange
        @else
          background: $bgOzaria
        border-bottom-left-radius: 15px
        border-bottom-right-radius: 0px
        margin-left: unset
        margin-right: 20px

        &:before
          left: unset
          right: -20px
          @if $is-codecombat
            background: radial-gradient(circle at top right, transparent, transparent 20px, $bgOrange 20px, $bgOrange)
          @else
            background: radial-gradient(circle at top right, transparent, transparent 20px, $bgOzaria 20px, $bgOzaria)

  .chat-area
    margin-left: -22px
    margin-bottom: 25px
    margin-right: 20px
    position: absolute
    bottom: 0px
    left: 0px
    min-width: 530px
    max-width: 650px
    width: calc(57vw - 50px)
    //width: calc(#{$game-view-width} - 50px)
    //max-height: Max(200px, calc(100vh - calc(#{$game-view-width} * (589 / 924)) - 50px - 60px - 80px - 30px - 25px))
    max-height: Max(200px, calc(100vh - (100vw * 0.57 - 17px) * 589 / 924 - 50px - 60px - 80px - 30px - 25px))
    scroll-behavior: smooth
    overflow-y: scroll
    scrollbar-width: none
    -ms-overflow-style: none

    &::-webkit-scrollbar
      width: 0
      height: 0

    &.open-chat-area
      max-height: Max(600px, calc(100vh - (100vw * 0.57 - 17px) * 589 / 924 - 50px - 60px - 80px - 30px - 25px))

  input, textarea
    width: calc(57vw - 50px - 41px)

  .closed-chat-area
    max-height: 400px
    //max-height: Max(200px, calc(100vh - calc(#{$game-view-width}) * (589 / 924) - 50px - 80px - 60px - 30px - 25px))
    max-height: Max(200px, calc(100vh - (100vw * 0.57 - 200px - 17px) * 589 / 924 - 50px - 60px - 80px - 30px - 25px))

  .open-chat-area
    background-color: rgba(50,50,50,0.6)
    padding: 10px 10px 0 0
    border-radius: 5px
    border: 1px solid #222
    max-height: 600px
    //max-height: Max(600px, calc(100vh - calc(#{$game-view-width}) * (589 / 924) - 50px - 80px - 60px - 30px - 25px))
    max-height: Max(600px, calc(100vh - (100vw * 0.57 - 200px - 17px) * 589 / 924 - 50px - 60px - 80px - 30px - 25px))


    .close-level-chat
      position: absolute
      top: 0
      right: 0
      font-size: 36px
      line-height: 20px
      color: white
      cursor: pointer

  tr
    line-height: 18px // space between multiple lines within messages
    strong
      color: #aff // other people color
    &.me strong
      color: #ffa // me color
    height: 55px // height of messages, including space between messages

  .ai-helper-chat-icon
    position: absolute
    bottom: 5px
    left: 3px
    float: left
    cursor: pointer
    display: none
    transition: transform 0.2s ease-in-out
    
    // Reset button styles to maintain original appearance
    background: none
    border: none
    padding: 0
    margin: 0
    outline: none
    
    &:hover
      transform: scale(1.1)
    
    &:focus
      outline: none
    
    img
      width: 24px
      height: 24px
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))

  input, textarea
    position: absolute
    bottom: 0px
    left: 20px
    right: 0px
    min-width: 489px
    max-width: 609px
    width: calc(57vw - 50px - 41px)
    height: 27px
    min-height: 27px
    max-height: 100px
    resize: none
    overflow: hidden

    box-sizing: border-box
    //height: 22px

    font-size: 16px
    color: white

    background-color: rgba(50,50,50,0.4)
    
    &:focus
      background-color: rgba(50,50,50,1.0)

    border-color: rgba(0,0,0,0.4)
    border-radius: 2px
    border-width: 1px
    text-shadow: 1px 1px 1px black

    &::placeholder
      opacity: 0.75
      color: white

  .player-avatar-cell, .chatbot-avatar-cell
    vertical-align: top

    img.avatar
      width: 40px
      margin-right: 5px

  .ai-btn-active
    background-image: url($Button)
    background-position: center
    background-size: contain
    background-repeat: no-repeat
    font-size: 16px
    font-weight: bold
    letter-spacing: 0.77px
    line-height: 18px
